<template>
  <div class="flex flex-col items-center gap-2 w-full">
    <div v-if="loading" class="text-gray-400">Loading...</div>
    <div v-else>
      <div class="flex flex-col md:flex-row gap-4 items-center">
        <div class="bg-white rounded p-2 shadow min-w-[120px]">
          <div class="font-bold text-blue-700">Player</div>
          <div class="flex gap-2 mt-1">
            <span v-for="card in playerHand" :key="card[0]" class="text-lg">{{ card[0] }}</span>
          </div>
          <div class="text-sm text-gray-500 mt-1">Points: {{ playerPoints }}</div>
        </div>
        <div class="bg-white rounded p-2 shadow min-w-[120px]">
          <div class="font-bold text-red-700">Banker</div>
          <div class="flex gap-2 mt-1">
            <span v-for="card in bankerHand" :key="card[0]" class="text-lg">{{ card[0] }}</span>
          </div>
          <div class="text-sm text-gray-500 mt-1">Points: {{ bankerPoints }}</div>
        </div>
      </div>
      <div class="mt-4 text-xl font-bold text-center">
        <span v-if="result === 'player'" class="text-blue-700">Player Wins!</span>
        <span v-else-if="result === 'banker'" class="text-red-700">Banker Wins!</span>
        <span v-else-if="result === 'tie'" class="text-green-700">Tie!</span>
        <span v-else class="text-gray-500">No result yet.</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../logic/api'

const playerHand = ref([])
const bankerHand = ref([])
const playerPoints = ref(0)
const bankerPoints = ref(0)
const result = ref('')
const loading = ref(true)

async function fetchResult() {
  loading.value = true
  try {
    const res = await api.game.dealOnly()
    playerHand.value = res.player_hand
    bankerHand.value = res.banker_hand
    playerPoints.value = res.player_points
    bankerPoints.value = res.banker_points
    result.value = res.result
  } catch (e) {
    result.value = ''
  }
  loading.value = false
}

onMounted(fetchResult)
</script> 